/*
 * @Author: shiguo
 * @Date: 2022-04-24 15:58:39
 * @LastEditors: shiguo
 * @LastEditTime: 2022-04-26 12:38:13
 * @FilePath: /@aks/easy/lib/PictureViewer/PictureViewer.tsx
 */

import * as React from 'react'
import { Modal, StatusBar, Platform } from 'react-native'
import ImageViewer from "react-native-image-zoom-viewer";

import type { BindProps } from './index'

export const PictureViewer: React.FC<{ bind: BindProps }> = ({ bind }) => {

    const { viewModel, setViewModel } = bind
    const visible = viewModel.imageViewer.visible
    const imgs = viewModel.imageViewer.imageUrls?.map(item => ({ url: item }))
    const index = viewModel.imageViewer.index

    React.useEffect(() => {
        if (Platform.OS == 'android') {
            if (visible) {
                StatusBar.setBackgroundColor('black')
                StatusBar.setBarStyle('light-content')
            } else {
                StatusBar.setBackgroundColor('transparent')
                StatusBar.setBarStyle('dark-content')
            }
        }
    }, [visible])



    return (
        <Modal
            presentationStyle='overFullScreen'
            visible={visible}
            transparent={false}
            onRequestClose={() => {
                /**
                 * 【官方文档】
                 * onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。
                 * 请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。
                 */
                setViewModel({
                    imageViewer: {
                        ...viewModel.imageViewer,
                        visible: false
                    }
                })
            }}
            style={{ margin: 0, backgroundColor: 'red' }}
        >
            <ImageViewer
                imageUrls={imgs}
                index={index}
                onSwipeDown={() => {
                    // console.log('onSwipeDown');
                }}
                saveToLocalByLongPress={false}
                // onMove={data => console.log(data)}
                useNativeDriver={true}
                enableSwipeDown={true}
                onClick={() => {
                    setViewModel({
                        imageViewer: {
                            ...viewModel.imageViewer,
                            visible: false
                        }
                    })
                }}
            />
        </Modal>
    )
}



